<!-- 邀请好友绑定 -->
<template>
  <div class="page">
    <cube-popup type="my-popup" ref="ads-active" maskClosable v-show="showAds">
      <div class="active-ct">
        <div class="content">
          <div ref="look-active-scroll" style="background:#1E213C;border-radius:6px;">
            <a @touchstart="" href="javascript:void(0);">
              <!--<img :src="activeImg" alt="" @load="refreshImg" />-->
              <img src="~assets/images/node/notice.png" alt="" />
            </a>
          </div>
        </div>
        <div class="close">
          <p><img src="~assets/images/node/wechat.png" alt="" class="" />orge006</p>
          <img @click="closeActive" data-clipboard-text="orge006" src="~assets/images/node/btn.png" alt="" class="img-responsive center-block clipboard-btn" />
        </div>
      </div>
    </cube-popup>
    <div class="intro-wrapper" :class="{'whole-height': status == 2}">
      <div>
        <img src="~assets/images/node/topimg.png" alt="" class="banner" />
      </div>
      <!--<div class="node-number">
        <p>现已有<span>{{now.first}}</span><span>{{now.second}}</span><span>{{now.third}}</span>个超级节点</p>
        <p>超级节点剩余名额<span>{{left.first}}</span><span>{{left.second}}</span><span>{{left.third}}</span>个</p>
      </div>-->
      <div class="normal show-no-number">
        <h4 class="top-pin">
          <img src="~assets/images/node/pin.png" alt="" />
          <img src="~assets/images/node/pin.png" alt="" />
        </h4>
        <h3>
          <img src="~assets/images/node/line.png" alt="" /><span>简介</span><img src="~assets/images/node/line1.png" alt="" />
        </h3>
        <div class="content">
          <p>CVN（Content Value Network）是人人影视发起的区块链项目，初衷是为了更好地将社区的闲置资源和共识转化为一种对社会和内容行业的推动力，建立一个循环且自制的分享型社区。</p>
          <p>CVNT（CVN Token）是整个生态体系中唯一能够流通的代币，目前已在火币主板、Bitmax、Bitforex、MXC、Coinw等交易所上线。</p>
          <p>为了加快CVNT的生态布局 ，CVN项目发起CVNT“121计划”，面向全球招募121个超级节点，超级节点可享受CVNT生态中的各类福利政策。</p>
        </div>
        <h4 class="bottom-pin">
          <img src="~assets/images/node/pin.png" alt="" />
          <img src="~assets/images/node/pin.png" alt="" />
        </h4>
      </div>
      <div class="normal">
        <h4 class="top-pin">
          <img src="~assets/images/node/pin.png" alt="" />
          <img src="~assets/images/node/pin.png" alt="" />
        </h4>
        <h3>
          <img src="~assets/images/node/line.png" alt="" /><span>如何成为超级节点</span><img src="~assets/images/node/line1.png" alt="" />
        </h3>
        <div class="content">
          <p>用户成为超级节点的操作很简单，只需要几个步骤就可以完成。</p>
          <div class="image-wrapper">
            <img class="img-responsive center-block" src="~assets/images/node/step.png" alt="" />
          </div>
          <!--<div class="step">
            <div class="step1">1.申请</div>
            <div class="step2">2.与客服<br/>一对一沟通</div>
            <div class="step3">3.质押<br/>100万CVNT</div>
            <div class="step4">4.成为超级节点</div>
          </div>-->
          <p>系统会为每个超级节点生成独一无二的邀请码，超级节点通过邀请码与名下矿工形成绑定关系。矿工必须经过超级节点的邀请码才可开启挖矿，每个超级节点旗下可招募2000个节点。</p>
          <div class="image-wrapper">
            <img class="img-responsive center-block" src="~assets/images/node/step1.png" alt="" />
          </div>
        </div>
        <h4 class="bottom-pin">
          <img src="~assets/images/node/pin.png" alt="" />
          <img src="~assets/images/node/pin.png" alt="" />
        </h4>
      </div>
      <div class="normal">
        <h4 class="top-pin">
          <img src="~assets/images/node/pin.png" alt="" />
          <img src="~assets/images/node/pin.png" alt="" />
        </h4>
        <h3>
          <img src="~assets/images/node/line.png" alt="" /><span>成为超级节点的多重收益</span><img src="~assets/images/node/line1.png" alt="" />
        </h3>
        <div class="content">
          <p>超级节点可享受多重收益，包括矿工收益提成、基金会奖励、挖矿收益、VIP经销商收益等。</p>
          <div class="image-wrapper">
            <img class="img-responsive center-block not-whole-width" src="~assets/images/node/step2.png" alt="" />
          </div>
          <h5><span>1</span>矿工收益提成</h5>
          <p>超级节点可永久享受获得旗下矿工节点收益的10%作为收入，收益日结。</p>
          <p class="special">示例1：你是超级节点，你名下有1名矿工，该矿工当日的挖矿收益为100个CVNT，那么这100个CVNT中的10%，即10个CVNT将提供给你作为旗下矿工收益提成。</p>
          <h5><span>2</span>基金会奖励</h5>
          <p>为鼓励超级节点积极推广，第一年基金会将启动对超级节点的额外奖励，奖励为矿工提成的2倍，超级节点额外奖励每周结算。</p>
          <p class="special">示例2：如示例1中，超级节点共获得10个CVNT的矿工收益提成，那么在第一年，基金会会额外奖励超级节点，金额为矿工收益提成的2倍，那么对于示例一中的超级节点，额外会获得10*2即20个CVNT的奖励。</p>
          <h5><span>3</span>挖矿收益</h5>
          <p>超级节点可以通过路由矿机、Linux端、Windows/Mac等多种方式挖矿，获得收益。</p>
          <h5><span>4</span>VIP经销商</h5>
          <p>超级节点可免保证金享受CVNT路由矿机的经销商价格，并可一键开店。同时，超级节点也可免保证金成为人人影视会员经销商，享受生成会员码最低折扣价格。</p>
        </div>
        <h4 class="bottom-pin">
          <img src="~assets/images/node/pin.png" alt="" />
          <img src="~assets/images/node/pin.png" alt="" />
        </h4>
      </div>
    </div>
    <div @touchmove.prevent class="application-wrapper" v-if="status == 1">
      <p @click="lookActive">申请成为超级节点</p>
    </div>
  </div>


</template>

<script>
  // import {getMbAreaCode } from 'api/register'

  export default {
    beforeRouteEnter (to, from, next) {
      next((vm) => {
        let uid = to.query.uid;
        let token = to.query.token;
        let status = to.query.status;
        if (!status) {
          status = 1;
        }
        vm.uid = uid;
        vm.token = token;
        // console.log(status);
        vm.status = Number(status);
        /* 状态等于2时，表示用户从其它页面点击进入超级节点细则，此时页面显示完整高度，下方加入按钮隐藏 */
        /*if (status == 2) {
          vm.$router.push({path: '/superPointUser', query: {
            uid: vm.uid,
            token: vm.token
          }});
        }*/
      })
    },
    data () {
      return {
        uid: '',
        token: '',
        status: 1,
        activeImg: '',
        showAds: false,
        now: {
          first: 0,
          second: 9,
          third: 8
        },
        left: {
          first: 0,
          second: 2,
          third: 3
        }
      }
    },
    created () {
      /*this.uid = this.getQueryVariable('uid');
      console.log('customer uid is: ' + this.uid);
      this.token = this.getQueryVariable('token');
      console.log('customer token is: ' + this.token);
      this.status = this.getQueryVariable('status');
      console.log('current page status is: ' + this.status);
      if (this.status == 3) {
        window.location = "";
      }*/
    },
    methods: {
      getQueryVariable(variable) {
        let query = window.location.href.split('?')[1];
        let vars = query.split('&');
        for (let i = 0; i < vars.length; i++) {
          let pair = vars[i].split('=');
          if (pair[0] == variable) {
            return pair[1];
          }
        }
      },
      refreshImg() {
        this.$nextTick(() => {
          // this.$refs['look-active-scroll'].refresh();
        })
      },
      lookActive() {
        this.activeImg = require('assets/images/node/notice.png');
        this.$refs['ads-active'].show();
      },
      closeActive() {
        this.$refs['ads-active'].hide();
        const toast = this.$createToast({
          txt: '客服微信号复制成功！',
          type: 'correct'
        });
        toast.show();
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '~common/scss/index.scss';
  @import "~common/scss/variable";
  @import "~common/scss/mixin";

  $color: #5A99FF;
  body {
    height: 100%;
    background: #282FA5;
  }
  .page {
    height: 100%;
    width: 100%;
    background: #282FA5;
    overflow: hidden;
  }
  .intro-wrapper{
    height:calc(100% - 98px);
    overflow-y:auto;
  }
  .whole-height{
    height:100%;
  }
  .banner {
    display: block;
    width: 100%;
    height: 860px;
  }
  .node-number{
    position: relative;
    padding-top:25px;
    height: 180px;
    margin:-212px 54px 0;
    background: url("~assets/images/node/numbg.png") no-repeat center center;
    background-size: 100% 100%;
    p{
      height:60px;
      line-height:60px;
      font-size:30px;
      text-align:center;
      color:#fefefe;
      span{
        display:inline-block;
        margin-right:2px;
        width:40px;
        height:60px;
        background:linear-gradient(0deg,rgba(6,187,241,1),rgba(17,85,198,1));
        border-radius:4px;
        font-size:48px;
      }
      span:first-child{
        margin-left:7px;
      }
      span:last-child{
        margin-right:8px;
      }
    }

    p:last-child{
      margin-top:9px;
    }
  }

  .normal{
    margin:32px 30px;
    padding:24px;
    background:rgba(50,88,232,1);
    border-radius:10px;
    h4{
      display:flex;
      justify-content:space-between;
      img{
        width:16px;
        height:16px;
      }
    }
    .top-pin{
      margin-bottom:40px;
    }
    .bottom-pin{
      margin-top:32px;
    }
    h3{
      margin-bottom:29px;
      text-align:center;
      img{
        width:40px;
        height:24px;
        vertical-align:middle;
      }
      span{
        display:inline-block;
        margin:0 11px 0 12px;
        font-size:36px;
        color:#fff;
        font-weight:500;
      }
    }
    .content{
      p{
        font-size:28px;
        color:#fff;
        line-height:1.5;
      }
      .step{
        display:flex;
        align-items:center;
        height:168px;
        margin:18px 0;
        padding:0 12px 0 11px;
        font-size:24px;
        border-radius:10px;
        background:rgba(92,121,232,1);
        color:#fff;
        white-space:nowrap;
        .step1{
          flex:0.55;
        }
        .step2{
          flex:0.85;
          line-height:1.5;
          text-align:center;
        }
        .step3{
          flex:0.9;
          line-height:1.5;
          text-align:center;
        }
        .step4{
          flex:1;
          text-align:right;
        }
      }
      .image-wrapper{
        margin:18px 0;
      }
      h5{
        font-size:28px;
        font-weight:bold;
        color:#fff;
        span{
          display:inline-block;
          width:30px;
          height:30px;
          margin:18px 11px 18px 0;
          line-height:30px;
          font-size:26px;
          text-align:center;
          background:rgba(239,189,36,1);
          border-radius:50%;
        }
      }
      .special{
        color:#C2C3F9;
      }
    }
  }

  .show-no-number{
    position:relative;
    z-index:99;
    margin-top:-212px;
  }
  .application-wrapper{
    display:flex;
    height:98px;
    line-height:98px;
    align-items:center;
    p{
      width:100%;
      height:98px;
      line-height:98px;
      font-size:36px;
      cursor:pointer;
      text-align:center;
      color:#fff;
      background:linear-gradient(180deg,rgba(25,187,254,1),rgba(13,118,248,1));
    }
  }

  .img-responsive{
    display:block;
    max-width:100%;
    height:auto;
  }
  .center-block{
    display:block;
    margin:0 auto;
  }

  .not-whole-width{
    width:85.92%;
    margin-bottom:-18px;
  }

  .active-ct{
    position:relative;
    width:83vw;
    margin:0 auto;
    /*background:#1E213C;*/
    .content{
      /*background:#1E213C;*/
      /*margin:0 auto;*/
      /*width:602px;*/
      /*width:92vw;*/
      /*height:66.6vh;*/
      /*height:105.33vw;*/
      padding:32px 16px 0;
      margin-bottom:22px;
      -webkit-overflow-scrolling: touch;
      overflow:auto;
      img{
        display:block;
        width:100%;
        min-height:500px;
        height:auto;
        border-radius:6px;
      }
    }
    .close{
      position:absolute;
      z-index:9999;
      width:100%;
      bottom:160px;
      /*margin-top:-390px;*/
      cursor:pointer;
      p{
        margin-bottom:44px;
        font-size:40px;
        color:#38383E;
        text-align:center;
        img{
          width:42px;
          height:42px;
          margin-right:8px;
          margin-left:8px;
          vertical-align:middle;
        }
      }
      >img{
        width:70.2%;
      }
    }
  }
  .cube-scroll-wrapper{
    background:transparent!important;
  }
  .cube-popup .cube-popup-mask{
    opacity:0.5;
    background-color:#000;
  }

















</style>
